<template lang="">
  <div>

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-首页</title>

    </head>
    <body>
    <div id="app" v-cloak>
  <div class="header_con">
    <div class="header">
    <div class="welcome fl">欢迎来到美多商城!</div>
  <div class="fr">
    <div class="login_info fl">
    欢迎您：<em>张 山</em>
  < a href=" " class="quit">退出</ a>
    </div>
    <div class="login_btn fl">
    < a href="login.html">登录</ a>
    <span>|</span>
    < a href="register.html">注册</ a>
    </div>
    <div class="user_link fl">
    <span>|</span>
    < a href="user_center_info.html">用户中心</ a>
    <span>|</span>
    < a href="cart.html">我的购物车</ a>
    <span>|</span>
    < a href="user_center_order.html">我的订单</ a>
    </div>
    </div>
    </div>
    </div>

    <div class="search_bar clearfix">
    < a href="index.html" class="logo fl">< img src="images/logo.png"></ a>
    <div class="search_wrap fl">
    <form method="get" action="/search/" class="search_con">
    <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
    <input type="submit" class="input_btn fr" name="" value="搜索">
    </form>
    <ul class="search_suggest fl">
    <li>< a href="#">索尼微单</ a></li>
  <li>< a href="#">优惠15元</ a></li>
  <li>< a href="#">美妆个护</ a></li>
  <li>< a href="#">买2免1</ a></li>
  </ul>
  </div>

  <div class="guest_cart fr">
    < a href="/carts/" class="cart_name fl">我的购物车</ a>
    <div class="goods_count fl" id="show_count">[[ cart_total_count ]]</div>
    <ul class="cart_goods_show">
    <!-- <li v-for="cart in carts">
    < img :src="cart.default_image_url" alt="商品图片">
    <h4>[[ cart.name ]]</h4>
    <div>[[ cart.count ]]</div>
    </li> -->
    </ul>
    </div>
    </div>

    <div class="navbar_con">
    <div class="navbar">
    <h1 class="fl">商品分类</h1>
    <ul class="navlist fl">
    <li>< a href="">首页</ a></li>
  <li class="interval">|</li>
    <li>< a href="">真划算</ a></li>
  <li class="interval">|</li>
    <li>< a href="">抽奖</ a></li>
  </ul>
  </div>
  </div>

  <div class="pos_center_con clearfix">
    <ul class="slide">
    <li>< a href="#">< img src="images/slide01.jpg" alt="幻灯片01"></ a></li>
  <li>< a href="#">< img src="images/slide02.jpg" alt="幻灯片02"></ a></li>
  <li>< a href="#">< img src="images/slide03.jpg" alt="幻灯片03"></ a></li>
  <li>< a href="#">< img src="images/slide04.jpg" alt="幻灯片04"></ a></li>
  </ul>
  <div class="prev"></div>
    <div class="next"></div>
    <ul class="points">
    </ul>
    <ul class="sub_menu">
    <li  v-for='i in catelist'>
    <div class="level1">
    < a href="http://shouji.jd.com/">{{i.name}}</ a>
  </div>
  <div class="level2">
    <div class="list_group"  v-for='j in i.subs' >
    <div class="group_name fl">{{j.name}}</div>
  <div class="group_detail fl">
    < a href="list.html" v-for='c in j.subs'>{{c.name}}</ a>

  </div>
  </div>

  </div>
  </li>

  </ul>

  <div class="news">
    <div class="news_title">
    <h3>快讯</h3>
    < a href="#">更多 &gt;</ a>
    </div>
    <ul class="news_list">
    <li>< a href="#">i7顽石低至4199元</ a></li>
  <li>< a href="#">奥克斯专场 正1匹空调1313元抢</ a></li>
  <li>< a href="#">荣耀9青春版 高配 领券立减220元</ a></li>
  <li>< a href="#">美多探索公益新模式</ a></li>
  <li>< a href="#">i7顽石低至4199元</ a></li>
  <li>< a href="#">正1匹空调1313元抢</ a></li>
  <li>< a href="#">奥克斯专场 正1匹空调1313元抢</ a></li>
  </ul>
  < a href="#" class="advs">< img src="images/adv01.jpg"></ a>
    </div>
    </div>

    <div class="list_model" v-for='i in categoods'>
    <div class="list_title clearfix">
    <h3 class="fl" id="model01">{{i.name}}</h3>
  <div class="subtitle fr">
    <!-- < a href="javascript:;" @mouseenter="f1_tab=1" :class="f1_tab===1?'active':''">时尚新品</ a>
    < a href="javascript:;" @mouseenter="f1_tab=2" :class="f1_tab===2?'active':''">畅想低价</ a>
    < a href="javascript:;" @mouseenter="f1_tab=3" :class="f1_tab===3?'active':''">手机配件</ a> -->
    <button @click="getCatelist('create_time',i.id)">新品</button>
    <button @click="getCatelist('price',i.id)">价格</button>
    <button @click="getCatelist('sales',i.id)">销量</button>
    </div>
    </div>
    <div class="goods_con clearfix">
    <div class="goods_banner fl">
    < img src="images/banner01.jpg">
    <div class="channel">
    < a href="#" v-for='t in i.two'>{{t.name}}</ a>

  </div>
  <div class="key_words">
    < a href="#" v-for='th in i.three'>{{th.name}}</ a>

  </div>
  </div>
  <div class="goods_list_con">
    <ul class="goods_list fl" >
    <li v-for='g in i.goods'>
    < a href="#" class="goods_pic">< img :src="'http://localhost:8000/media/'+i.pic"></ a>
    <h4>< a href="#" title="360手机 N6 Pro 全网通 6GB+128GB 极夜黑">{{g.name}}</ a></h4>
  <div class="price">¥ {{g.price}}</div>
  </li>

  </ul>

  </div>
  </div>
  </div>


  <div class="footer">
    <div class="foot_link">
    < a href="#">关于我们</ a>
    <span>|</span>
    < a href="#">联系我们</ a>
    <span>|</span>
    < a href="#">招聘人才</ a>
    <span>|</span>
    < a href="#">友情链接</ a>
    </div>
    <p>CopyRight  2016 北京美多商业股份有限公司 All Rights Reserved</p >
  <p>电话：010-****888    京ICP备*******8号</p >
  </div>
  </div>

  </body>
  </html>
  </div>
  </template>
  <script>
  export default {
    data(){
      return{
        catelist:[],
        categoods:[]
      }
    },
    methods: {
      getCatelist(sorted,topid){
        this.axios.get('goods/home/?sorted='+sorted+'&topid='+topid).then(res=>{
          this.catelist=res.data.catelist
          this.categoods = res.data.categoods
        })
      }
    },
    mounted() {
      this.getCatelist('')
    },
  }
  </script>
  <style lang="">
  </style>
